<template>
	<navbar titleText="我的" />
	<view class="PM">
		<view class="word">
			<image class="photo" src="../../static/photo.jpg"  ></image>
			<view class="message">
				<view class="name">{{user_info.name}}</view>
				<view class="dp">{{user_info.dp}}</view>
			</view>
		</view>
		<view class="PM-set">账户设置</view>
	</view>
	
	<view class="line"></view>
	
	<view class="tip">
		<view class="tip-left">
			<image class="icon" src="../../static/user/hostory.png"></image>
			<view class="text">历史</view>
		</view>
		<image class="icon-more" src="../../static/index/more.png"></image>
	</view>
	<view class="tip">
		<view class="tip-left">
			<image class="icon" src="../../static/user/message.png"></image>
			<view class="text">消息</view>
		</view>
		<image class="icon-more" src="../../static/index/more.png"></image>
	</view>
	<view class="tip">
		<view class="tip-left">
			<image class="icon" src="../../static/user/set.png"></image>
			<view class="text">设置</view>
		</view>
		<image class="icon-more" src="../../static/index/more.png"></image>
	</view>
</template>

<script setup>
	import {onShow} from '@dcloudio/uni-app'
	import { reactive } from 'vue';
	const app = getApp()
	const user_info =reactive(uni.getStorageSync('user_info'))
	onShow(()=>{
		app.globalData.utils.isLogin()
	})
	
</script>

<style>
	.PM{
		width: 750rpx;
		height: 260rpx;
		display: flex;
		justify-content: space-between;
	}
	.word{
		display: flex;
	}
	.photo{
		height: 140rpx;
		width: 140rpx;
		border-radius: 50%;
		margin: 80rpx 20rpx 40rpx 40rpx;
		background-color: aqua;
	}
	.message{
		height: 140rpx;
		margin: 80rpx 20rpx 40rpx 0rpx;
	}
	.name{
		font-size: 40rpx;
		margin: 20rpx 0rpx;
	}
	.PM-set{
		margin: 120rpx 40rpx 80rpx 80rpx;
		padding: 8rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #666666;
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #666666;
	}
	.dp{
		font-size: 25rpx;
		color: #666666;
	}
	.line{
		height: 20rpx;
		background-color: #F5F5F5;
	}
	.tip{
		display: flex;
		padding: 20rpx 40rpx;
		justify-content: space-between;
	}
	.tip-left{
		display: flex;
	}
	
	.icon{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;

	}
	.text{
		margin-left: 20rpx;
		color: #666666;
	}
	.icon-more{
		height: 30rpx;
		width: 30rpx;
		margin: 6rpx 0rpx;
	}
</style>
